<template v-loading="loading" element-loading-text="正在获取画面..." :element-loading-spinner="svg"
	element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(204, 204, 204, 0.9)">
	<div class="indexBox">
		<div class="indexBox_title">
			<div class="time">
				{{currentDateTime}}
			</div>
			<div class="textname">混捏锅监控画面</div>
			<div class="btnbox">
					<el-button color="#02c3e3" dark="dark"  style="color: #fff;" @click="goHis" >历史</el-button>
			</div>
		</div>
		<div class="indexBox_center">

			<potItem class="itemBox" :items="item" v-for="(item,index) in store.potList" :key="item.id"></potItem>

		</div>
			
			
		<div class="indexBox_bottom">
			<div class="indexBox_bottom_left">
				<div class="btn" v-if="store.potList[0] && store.potList[0].boolOutPotMsg">西线出锅</div>
			</div>
			<div class="indexBox_bottom_right">
				<div class="btn" v-if="store.potList[3] && store.potList[3].boolOutPotMsg">东线出锅</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		getCurrentInstance
	} from 'vue'
	import {
		useCounterStore
	} from '../../stores/index';
	const store = useCounterStore();
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import potItem from '../../components/pot/potItem.vue'
	const {
		proxy
	} = getCurrentInstance()
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const goHis=()=>{
		router.push('/his')
	}
	const currentDateTime = ref(new Date().toLocaleString());

	const updateDateTime = () => {
		currentDateTime.value = new Date().toLocaleString();
	};

	const itemList = ref([])
	const loading = ref(true)
	const svg = `
	        <path class="path" d="
	          M 30 15
	          L 28 17
	          M 25.61 25.61
	          A 15 15, 0, 0, 1, 15 30
	          A 15 15, 0, 1, 1, 27.99 7.5
	          L 15 15
	        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
	      `
	const getList = () => {
		proxy.$request.getList().then((res => {

			loading.value = true
			if (res.data.code === 200) {
				loading.value = false

				store.setPot(res.data.result)


			} else {

				ElMessage.error(res.data.message)
			}
		})).catch((err => {
			console.log('err', err)
		}))
	}
	let interval=reactive(null)
	onMounted(() => {
		if(!interval){
			interval = setInterval(updateDateTime, 1000);
		}
		getList()
		proxy.$WS.createWS()
	})
	onUnmounted(() => clearInterval(interval));
</script>

<style lang="scss" scoped>
	.indexBox {

		&_title {
			padding: 0 50px;
			background: linear-gradient(to bottom, #0e3563, #afd6ff, #0e3563);
			height: 58px;
			line-height: 58px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;

			.time {
				font-size: 29px;
				font-weight: 400;
			}

			.textname {
				display: inline-block;
				width: 100%;
				text-align: center;
				position: absolute;
				left: 0;

				font-size: 29px;

				color: #000;
			}

			.btnbox {
				padding: 5px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				z-index: 99;

				.hisbtn {
					width: 75px;
					height: 28px;
					background-color: #409EFF;
					color: #fff;
					border: 1px solid #409EFF;
					border-radius: 0;
				}

			}
		}

		&_center {
			padding: 30px 8px;
			box-sizing: border-box;
			display: flex;


			.itemBox {
				margin-left: 25px;
				margin-right: 25px;
				width: 14%;
			}
		}

		&_bottom {
			padding: 30px 8px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			&_left {
				display: flex;
				justify-content: center;
				flex: 50%;

				.btn {
					text-align: center;
					line-height: 45px;
					width: 160px;
					height: 45px;
					background: linear-gradient(to right,
							#ff1d00 0%,
							#fffb00 75%,
							#ff1d00 100%);
				}
			}

			&_right {
				display: flex;
				justify-content: center;
				flex: 50%;

				.btn {
					text-align: center;
					line-height: 45px;
					width: 160px;
					height: 45px;
					background: linear-gradient(to right,
							#ff1d00 0%,
							#fffb00 75%,
							#ff1d00 100%);
				}
			}
		}
	}
</style>